<template>
  <div class="AttachmentGroup-Container">
    <viewer :images="syncedImages" class="images clearfix">
      <template #default="scope">
        <v-row no-gutters>
          <v-col
            class="image-wrap flex-grow-0 mr-2 mb-2"
            v-for="img in scope.images"
            :key="img.id"
            :class="[
              propArrangement === 'brief'
                ? 'flex-grow-0'
                : 'd-flex detailed-attachment-wrap',
            ]"
          >
            <v-row class="attachment" no-gutters>
              <v-col class="flex-grow-0">
                <div class="img-wrap">
                  <i class="img-decorate img-decorate-orange"></i>
                  <v-checkbox
                    v-model="selectedValue"
                    :value="img"
                    multiple
                    class="checkbox"
                    color="#556282"
                    hide-details
                  ></v-checkbox>
                  <img :src="img.src" :alt="img.title" />
                  <div
                    v-if="propArrangement === 'brief'"
                    class="img-introduction"
                  >
                    <svg>
                      <text x="2" y="10">
                        {{ img.title }}
                      </text>
                      <text x="2" y="18">
                        {{ img.subtitle }}
                      </text>
                    </svg>
                  </div>
                </div>
              </v-col>
              <v-col class="img-detail">
                <v-spacer v-if="propArrangement === 'detailed'">
                  <v-col class="py-0 px-1 pt-1">{{ img.title }}</v-col>
                  <v-col class="py-0 px-1">{{ img.subtitle }}</v-col>
                </v-spacer>
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </template>
    </viewer>
  </div>
</template>
<script lang="ts">
import { Vue, Component, PropSync, ModelSync } from "vue-property-decorator";
import { IFile } from "@/components/Project/index";

@Component({
  props: {
    arrangement: {
      type: String,
      default: "brief",
    },
  },
})
export default class AttachmentGroup extends Vue {
  @ModelSync("value", "input", { type: Array, default: () => [] })
  selectedValue!: object[];
  @PropSync("images", {
    type: Array,
    default: () => [],
  })
  syncedImages!: Array<IFile>;

  get propArrangement() {
    return this.$props.arrangement;
  }

  includeCheckValue(value: object) {
    return this.selectedValue.includes(value);
  }
}
</script>
<style lang="scss" scoped>
@import "./AttachmentGroup.scss";
</style>
